<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 搜索部分 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">特征提取监管</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content">
          <!-- <div class="form_div">
            <div>时间范围：</div>
            <div>
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </div>
            <div style="text-align: center">至</div>
            <div>
              <el-date-picker
                placeholder="选择时间"
                value-format="yyyy-MM-dd"
                type="date"
                v-model="form.date2"
                style="width: 100%"
              ></el-date-picker>
            </div>
          </div>
          <div>
            数据类型：
            <el-select v-model="dataType" style="margin-top: 5px">
              <el-option label="请选择" value=""></el-option>
              <el-option label="太阳风参数" value="sw"></el-option>
              <el-option label="太空环境日报" value="reportD"></el-option>
              <el-option label="太空环境周报" value="reportW"></el-option>
              <el-option label="太空环境通报" value="reportE"></el-option>
              <el-option label="太空环境警报" value="alert"></el-option>
              <el-option label="电离层现报" value="ionoNow"></el-option>
            </el-select>
            &nbsp;<el-button
              size="small"
              @click="searchInfo()"
              type="primary"
              style="margin-left: 5px"
              >搜 索</el-button
            >
          </div> -->
        </div>
      </div>
      <!-- 列表 -->
      <div class="main-el-row-content">
        <el-table
          :data="showData"
          style="width: 100%"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
          @row-dblclick="dbclick"
          :cell-class-name="tableCellClassName"
        >
          <el-table-column type="index" label="序号" width="80px" align="left">
          </el-table-column>
          <el-table-column
            prop="name"
            label="数据名称"
            width="140px"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="rowNum"
            label="单次提取条数"
            min-width="150px"
            align="left"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.rowNum"
                @blur="hideInput(scope)"
                :ref="scope.row.index + ',' + scope.column.index"
                v-if="scope.row.index + ',' + scope.column.index == currentCell"
              >
              </el-input>
              <span v-else active-color="#13ce66" inactive-color="#ff4949">
                {{ scope.row.rowNum }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="sourceRows"
            label="源数据条数"
            min-width="150px"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="targetRows"
            label="已提取条数"
            min-width="150px"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="location"
            label="提取位置"
            min-width="200px"
            align="left"
          >
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.location"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                @blur="hidePicker(scope)"
                :ref="scope.row.index + ',' + scope.column.index"
                v-if="scope.row.index + ',' + scope.column.index == currentCell"
              >
              </el-date-picker>
              <span v-else active-color="#13ce66" inactive-color="#ff4949">
                {{ scope.row.location }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastedRunTime"
            label="最新运行时间"
            min-width="200px"
            align="left"
          >
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.lastedRunTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                @blur="hideInput(scope)"
                :ref="scope.row.index + ',' + scope.column.index"
                v-if="scope.row.index + ',' + scope.column.index == currentCell"
              >
              </el-date-picker>
              <span v-else active-color="#13ce66" inactive-color="#ff4949">
                {{ scope.row.lastedRunTime }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="repairTime"
            label="提取进度"
            min-width="250px"
            align="left"
          >
            <template slot-scope="scope">
              <el-progress
                v-if="
                  (isNaN(scope.row.sourceRows / scope.row.targetRows)
                    ? 0
                    : Math.round(
                        (scope.row.targetRows / scope.row.sourceRows) * 10000
                      ) / 100.0) < 100
                "
                :text-inside="true"
                text-color="success"
                status="success"
                :stroke-width="20"
                :percentage="
                  isNaN(scope.row.sourceRows / scope.row.targetRows)
                    ? 0
                    : Math.round(
                        (scope.row.targetRows / scope.row.sourceRows) * 10000
                      ) / 100.0
                "
              ></el-progress>
              <el-progress
                v-else
                :text-inside="true"
                text-color="success"
                status="success"
                :stroke-width="20"
                :percentage="100"
              ></el-progress>
            </template>
          </el-table-column>
          <el-table-column
            prop="repairTime"
            label="提取状态"
            min-width="120px"
            align="center"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="begin(scope)"
              ></el-switch>
            </template>
          </el-table-column>
        </el-table>
        <div class="div-el-pagination" v-show="pageFlag">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            background
            layout="prev, pager, next, total, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { post } from "../../utils/request";
export default {
  name: "CleaningProblems",
  data() {
    return {
      form: {
        date1: "",
        date2: "",
      },
      total: 0,
      pageFlag: true,
      pageSize: 9,
      currentPage: 1,
      showData: [],
      dataType: "",
      currentTime: "", // 当前时间
      currentCell: "",
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 调用获取数据的函数
    init() {
      this.getDataSourceList();
    },
    // 获取当前时间
    getTime() {
      var myDate = new Date();
      var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var myToday = myDate.getDate(); //获取当前日(1-31)
      // var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
      // var myHour = myDate.getHours(); //获取当前小时数(0-23)
      // var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
      // var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
      // var week = [
      //   "星期日",
      //   "星期一",
      //   "星期二",
      //   "星期三",
      //   "星期四",
      //   "星期五",
      //   "星期六",
      // ];

      var nowTime =
        myYear + "-" + this.fillZero(myMonth) + "-" + this.fillZero(myToday);
      this.currentTime = nowTime;
    },
    // 时间的补0函数
    fillZero(str) {
      var realNum;
      if (str < 10) {
        realNum = "0" + str;
      } else {
        realNum = str;
      }
      return realNum;
    },
    // 当不选择时间的时候给它一个默认的时间段 并获取数据
    searchInfo() {
      var that = this;
      //console.log(item);
      that.currentPage = 1;
      if (!that.form.date1) {
        that.form.date1 = "1996-01-01";
      }
      if (!this.form.date2) {
        that.getTime();
        that.form.date2 = that.currentTime;
      }
      that.getDataSourceList(true);
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell
    // 拼接后类似这样："1,0","1,1",
    dbclick(row, column) {
      this.currentCell = row.index + "," + column.index;
      // 这里必须要setTimeout，因为在点击的时候，input才刚被v-if显示出来，不然拿不到dom
      setTimeout(() => {
        // 双击后自动获得焦点
        this.$refs[row.index + "," + column.index].focus();
      });
    },
    // 分页数据的修改 选择那页并获取数据
    handleCurrentChange(currentPage) {
      this.listLoading = true;
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.getDataSourceList();
    },
    begin(item) {
      console.log(item.row);
      let params = null;
      if (item.row.status) {
        params = {
          id: item.row.id,
          status: "1",
        };
      } else if (item.row.status == false) {
        params = {
          id: item.row.id,
          status: "0",
        };
      }
      console.log(params);

      post("/api/idatamanage/dataGov/updateFeatureExtraConfig", params).then(
        (res) => {
          console.log("数据", res);
          //   this.showData = res.data.data.rows;
        }
      );
    },
    hidePicker(scope) {
      console.log("失去焦点时触发", scope.row);
      console.log(scope.row.location);
      let locationString = scope.row.location;
      // let locationString = scope.row.location.toString()
      //   let locationTime = scope.row.location.split(" ");
      //   let timeleft = locationTime[0].split("-");
      //   let timeright = locationTime[1].split(":");
      //   let locationString =
      //     timeleft[0] +
      //     timeleft[1] +
      //     timeleft[2] +
      //     timeright[0] +
      //     timeright[1] +
      //     timeright[2];
      // let locationString =locationTime[0]+locationTime[1]
      console.log(locationString);
      let params = {
        id: scope.row.id,
        location: locationString,
      };
      console.log(params);

      post("/api/idatamanage/dataGov/updateFeatureExtraConfig", params).then(
        (res) => {
          console.log("数据", res);
          if (res.data) {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.init();
          } else {
            this.$message({
              message: "更新失败",
              type: "error",
            });
          }
          // this.showData = res.data.data.rows;
        }
      );
      this.currentCell = null;
    },
    // 当input失去焦点的时候，隐藏input
    hideInput(scope) {
      console.log("失去焦点时触发", scope.row);
      let params = {
        id: scope.row.id,
        rowNum: scope.row.rowNum,
      };
      console.log(params);
      post("/api/idatamanage/dataGov/updateFeatureExtraConfig", params).then(
        (res) => {
          console.log("数据", res);
          if (res.data) {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.init();
          } else {
            this.$message({
              message: "更新失败",
              type: "error",
            });
          }
          //   this.showData = res.data.data.rows;
        }
      );
      this.currentCell = null;
    },
    // 获取数据的函数
    getDataSourceList(flag) {
      var that = this;
      if (flag) {
        if (
          that.form.date1 > that.form.date2 ||
          !that.form.date1 ||
          !that.form.date2
        ) {
          this.$message({
            message: "请选择正确时间范围",
            type: "warning",
          });
          return;
        }
      }
      var params = {
        pageSize: that.pageSize,
        pageNum: that.currentPage,
      };
      console.log(params);
      post("/api/idatamanage/dataGov/queryFeatureExtraConfigList", params)
        .then((res) => {
          console.log("res=>", res.data.data.dataList);
          var dataSource = res.data.data;
          var dataList = dataSource.dataList;

          that.total = dataSource.total;
          that.showData = dataList;
          console.log(that.showData);
          that.showData.forEach((item) => {
            if (item.status == 1) {
              item.status = true;
            } else if (item.status == 0) {
              item.status = false;
            }
          });
          if (that.total <= 0) {
            //alert(that.total);
            this.pageFlag = false;
          } else {
            //alert(that.total);
            this.pageFlag = true;
          }
        })
        .catch(() => {
          this.pageFlag = false;
        })
        .finally(() => {});
    },
  },
};
</script>
<style src="../../assets/css/common.css"></style>
<style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
}
::v-deep .el-table {
  th {
    background-color: red($color: #000000) !important;
  }
}
.el-form-item__label {
  color: #84f2ff !important;
}

.header-content {
  height: 66px;
  padding: 10px 20px;
}


// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #c4d1dd;
// }
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

.el-dialog {
  background-color: rgba(8, 79, 140, 1);
}
// ::v-deep .el-table--striped {
//   .el-table__body {
//     tr.el-table__row--striped {
//       td.el-table__cell {
//         background: #0077a9;
//       }
//     }
//   }
// }
// ::v-deep .el-table--enable-row-transition {
//   .el-table__body {
//     td.el-table__cell {
//       background: #0c2d40;
//     }
//   }
// }
// ::v-deep.el-table__body {
//   .el-table__row.hover-row td {
//     background-color: #171f34;
//   }
// }
</style>